<template>
  <el-tabs type="border-card" v-model="activeName">
    <el-tab-pane name="1" label="样式">
      <el-form :model="form" label-width="80px" style="margin-left: 5px">
        <el-form-item label="标题">
          <el-input v-model="curLabel" @input="handleLabel" />
        </el-form-item>
        <el-form-item label="字号">
          <el-input
            v-model="curFontSize"
            type="number"
            @change="handleFontsize"
          />
        </el-form-item>
        <el-form-item label="文字">
          <el-popover placement="bottom" width="200" trigger="click">
            <div class="color-container" slot="reference">
              <div
                class="edit-color"
                :style="{
                  backgroundColor: curNode.attrs ? curNode.attrs.text.fill : '',
                }"
                @click="
                  () => {
                    textColorVisible = true;
                  }
                "
              ></div>
            </div>
            <template>
              <el-row style="margin-bottom: 10px">
                <sketch-picker
                  v-model="textColor"
                  @input="updateTextFill"
                  :preset-colors="presetColors"
                />
              </el-row>
              <!-- <el-row>
                <el-col :span='17'>
                  <el-button
                    @click='
                      () => {
                        textColorVisible = false;
                      }
                    '
                    >取消</el-button
                  >
                </el-col>
                <el-col :span='7'>
                  <el-button type='primary' @click='handleTextFill'
                    >确定</el-button
                  >
                </el-col>
              </el-row> -->
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item label="填充">
          <el-popover placement="bottom" width="200" trigger="click">
            <div class="color-container" slot="reference">
              <div
                class="edit-color"
                :style="{
                  backgroundColor: curNode.attrs ? curNode.attrs.body.fill : '',
                }"
                @click="
                  () => {
                    fillColorVisible = true;
                  }
                "
              ></div>
            </div>
            <template>
              <el-row style="margin-bottom: 10px">
                <sketch-picker
                  v-model="fillColor"
                  @input="updateBodyFill"
                  :preset-colors="presetColors"
                />
              </el-row>
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item label="边框">
          <el-popover placement="top" width="200" trigger="click">
            <div class="color-container" slot="reference">
              <div
                class="edit-color"
                :style="{
                  backgroundColor: curNode.attrs
                    ? curNode.attrs.body.stroke
                    : '',
                }"
                @click="
                  () => {
                    strokeColorVisible = true;
                  }
                "
              ></div>
            </div>
            <template>
              <el-row style="margin-bottom: 10px">
                <sketch-picker
                  v-model="strokeColor"
                  @input="updateBodyStroke"
                  :preset-colors="presetColors"
                />
              </el-row>
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item label="超链接">
          <el-input v-model="curLink" @input="updateLink"></el-input>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-col :span="24" :style="{ textAlign: 'center' }">
              <el-button type="primary" @click="handleSave">保存</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <!--    <el-tab-pane key='2' tab='参数'>-->
    <!--      Content of Tab Pane 2-->
    <!--    </el-tab-pane>-->
  </el-tabs>
</template>

<script>
import { message } from "ant-design-vue";
import { Node } from "@antv/x6";
import { Sketch } from "vue-color";
export default {
  name: "NodeConfigContainer",
  props: {
    // node: {type: Node, default: () => ({})}
    node: Node,
  },
  components: {
    "sketch-picker": Sketch,
  },
  data() {
    return {
      activeName: "1",
      colors: { r: 255, g: 0, b: 0 },
      presetColors: [
        "#f00",
        "#00ff00",
        "#00ff0055",
        "rgb(201, 76, 76)",
        "rgba(0,0,255,1)",
        "hsl(89, 43%, 51%)",
        "hsla(89, 43%, 51%, 0.6)",
      ],
      OtherForm: {
        ID: "",
        FileName: "",
        colors: {
          color: "",
          hex: "#194d33",
          hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
          hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
          rgba: { r: 25, g: 77, b: 51, a: 1 },
          a: 1,
        },
      },
      fillColorVisible: false,
      strokeColorVisible: false,
      textColorVisible: false,
      curId: "",
      curBodyFill: "",
      curBodyStroke: "",
      curTextFill: "",
      strokeColor: "",
      fillColor: "",
      textColor: "",
      curNode: Node,
      form: this.$form.createForm(this, { name: "configPanel" }),
      curFontSize: "",
      curLabel: "",
      curLink: "",
      nodeFormData: [],
    };
  },
  created() {
    console.log("nodeconfig");
  },
  methods: {
    // 修改node的标题
    handleLabel(e) {
      console.log(125, this.curNode, e, typeof(this.curNode));
      if(typeof this.curNode !== 'object'){
        message.error('请先选择node对象，再修改标题！')
        return false
      }
      if (this.curNode.attrs.label) {
        console.log(1)
        this.curNode.setAttrs({
          label: {
            text: e,
          },
        });
      } else {
        console.log(2)
        this.curNode.setLabel(e);
      }
      this.curLabel = e;
    },
    // 修改node的字体大小
    handleFontsize(e) {
      this.curNode.setAttrs({
        text: {
          fontSize: Number(e),
        },
      });
      this.curFontSize = e;
    },
    // 更新选色器颜色
    updateBodyFill(v) {
      this.curBodyFill = v.hex;
      this.fillColor = v.hex;
      this.curNode.setAttrs({
        body: {
          fill: this.curBodyFill,
        },
        top: {
          fill: this.curBodyFill,
        },
      });
    },
    // 更新body的填充色
    handleBodyFill() {
      this.curNode.setAttrs({
        body: {
          fill: this.curBodyFill,
        },
        top: {
          fill: this.curBodyFill,
        },
      });
      this.fillColorVisible = false;
    },
    // 更新选色器颜色
    updateBodyStroke(v) {
      this.curBodyStroke = v.hex;
      this.strokeColor = v.hex;
      this.curNode.setAttrs({
        body: {
          stroke: this.curBodyStroke,
        },
        top: {
          stroke: this.curBodyStroke,
        },
      });
    },
    // 更新body的边框色
    handleBodyStroke() {
      this.curNode.setAttrs({
        body: {
          stroke: this.curBodyStroke,
        },
        top: {
          stroke: this.curBodyStroke,
        },
      });
      this.strokeColorVisible = false;
    },
    // 更新选色器颜色
    updateTextFill(v) {
      this.curTextFill = v.hex;
      this.textColor = v.hex;
      this.curNode.setAttrs({
        text: {
          fill: this.curTextFill,
        },
      });
    },
    updateLink(e) {
      console.log(139, e.target.value);
      this.curNode.setAttrs({
        link: {
          text: e.target.value,
        },
      });
      this.curLink = e.target.value;
      console.log(this.curNode.attrs);
    },
    colorValueChange(val) {
      alert(2222, val.hex);
      console.log(297, val.hex);
      this.OtherForm.colors.color = val.hex;
    },
    // 更新body的边框色
    handleTextFill() {
      this.curNode.setAttrs({
        text: {
          fill: this.curTextFill,
        },
      });
      this.textColorVisible = false;
    },
    
    // 保存
    handleSave(e) {
      e.preventDefault();
      let beforeLen = this.nodeFormData.length;
      console.log("beforeLen", beforeLen, this.curNode);
      if(!this.curNode.id){
        message.warning("内容不能为空");
        return 
      }
      let obj = {
        id: this.curNode.id,
        shape: this.curNode.shape,
        width: this.curNode.store.data.size.width,
        height: this.curNode.store.data.size.height,
        position: {
          x: this.curNode.store.data.position.x,
          y: this.curNode.store.data.position.y,
        },
        label: this.curNode.label,
        attrs: this.curNode.attrs,
      };
      this.nodeFormData.push(obj);
      let afterLen = this.nodeFormData.length;
      if (afterLen > beforeLen) {
        message.success("保存成功");
      } else {
        message.warning("保存失败");
      }
      this.$emit("updateForm", this.nodeFormData);
    },
  },
  watch: {
    node(newValue) {
      console.log(197, newValue);
      this.curNode = newValue;
      this.curLabel = this.curNode.label
        ? this.curNode.label
        : this.curNode.attrs.label.text;
      this.curFontSize = this.curNode.attrs
        ? this.curNode.attrs.text.fontSize
        : "";
      this.curLink = this.curNode.attrs.link
        ? this.curNode.attrs.link.text
        : "";
    },
    curNode(newValue) {
      this.$emit("updateData", newValue);
    },
  },
};
</script>

<style scoped>
.color-container {
  margin-top: 8px;
  width: 24px;
  height: 24px;
  padding: 4px;
  border: 1px solid #dfe3e8;
  border-radius: 2px;
}
.edit-color {
  cursor: pointer;
  height: 100%;
}
</style>
